<template>
  <div>
    <h1>Electron App Update</h1>
    
    <!-- 显示进度条 -->
    <progress :value="downloadProgress.percent" max="100"></progress>
    <p>{{ downloadProgress.percent.toFixed(2) }}% downloaded</p>
    
    <!-- 显示错误信息 -->
    <p v-if="errorMessage" style="color: red">{{ errorMessage }}</p>
    
    <!-- 显示更新已完成信息 -->
    <p v-if="updateDownloaded">Update downloaded! You can now install it.</p>
    
    <!-- 更新按钮 -->
    <button @click="checkForUpdates">Check for Updates</button>
  </div>
</template>

<script>
import { ipcRenderer } from 'electron';

export default {
  data() {
    return {
      downloadProgress: {
        percent: 0,
        transferred: 0,
        total: 0,
      },
      updateDownloaded: false,
      errorMessage: null,
    };
  },
  mounted() {
    // 监听主进程发送的下载进度
    ipcRenderer.on('update-download-progress', (event, { percent, transferred, total }) => {
      this.downloadProgress = { percent, transferred, total };
    });

    // 监听更新已下载
    ipcRenderer.on('update-downloaded', () => {
      this.updateDownloaded = true;
    });

    // 监听更新错误
    ipcRenderer.on('update-error', (event, errorMessage) => {
      this.errorMessage = errorMessage;
    });
  },
  methods: {
    // 向主进程请求检查更新
    checkForUpdates() {
      ipcRenderer.invoke('check-for-updates');
    },
  },
};
</script>

<style scoped>
progress {
  width: 100%;
  height: 20px;
}
button {
  margin-top: 20px;
}
</style>
